import { useRef, useState } from "react";
import "./App.css";
import Timer from "./Timer";

function App() {
    const [seconds, setSeconds] = useState(null);
    const timerRef = useRef(null);
    return (
        <div className="App">
            <Timer
                ref={timerRef}
                seconds={seconds}
                onDone={() => setSeconds(null)}
            />
            <div className="btns">
                <button
                    onClick={() => setSeconds(5)}
                    disabled={seconds !== null}
                >
                    5
                </button>
                <button
                    onClick={() => setSeconds(10)}
                    disabled={seconds !== null}
                >
                    10
                </button>
                <button
                    onClick={() => setSeconds(15)}
                    disabled={seconds !== null}
                >
                    15
                </button>
                <button
                    onClick={() => setSeconds(30)}
                    disabled={seconds !== null}
                >
                    30
                </button>
                <button
                    onClick={() => timerRef.current.pause() }
                    disabled={seconds === null}
                >
                    ||
                </button>
                <button
                    onClick={() => setSeconds(null)}
                    disabled={seconds === null}
                >
                    C
                </button>
            </div>
        </div>
    );
}

export default App;
